<template>
  <div>
    <a-layout id="components-layout-demo-fixed-sider" style="min-height: 100vh">
      <f-sider></f-sider>
      <a-layout>
        <f-header></f-header>
        <a-row type="flex" style="flex: auto">
          <a-row>
            <f-settingsider></f-settingsider>
          </a-row>
          <a-layout-content
            :style="{ margin: '24px 16px 0', overflow: 'initial' }"
          >
            <a-tabs type="card" @change="callback">
              <a-tab-pane key="1" tab="站点设置">
                <div :style="{ padding: '24px', background: '#fff' }">
                  <!-- <a-row type="flex" justify="space-between">
                    <a-col>
                      <div class="title">站点设置</div>
                    </a-col>
                  </a-row>-->
                  <a-row
                    class="mt1r"
                    type="flex"
                    align="middle"
                    v-for="(item, index) in settingdata"
                    :key="index"
                  >
                    <a-col :span="4">{{ item.title }}：</a-col>
                    <a-col :span="12">
                      <a-input v-model="item.value" :placeholder="item.value" />
                    </a-col>
                  </a-row>
                  <div class="btn">
                    <a-button
                      type="primary"
                      :loading="iconLoading"
                      @click="save"
                      >保存</a-button
                    >
                    <a-button class="ml1rem" type="primary" @click="back"
                      >返回</a-button
                    >
                  </div>
                </div>
              </a-tab-pane>
              <a-tab-pane key="2" tab="首页设置">
                <div :style="{ padding: '24px', background: '#fff' }">
                  <a-row type="flex" justify="space-between">
                    <a-col class="disflex">
                      <div class="title mr1r">首页分类状态设置</div>
                    </a-col>
                  </a-row>
                  <a-row type="flex" justify="space-between">
                    <a-col class="disflex">
                      <a-radio-group v-model="status" @change="onChange">
                        <a-radio :value="1">大图</a-radio>
                        <a-radio :value="2">小图</a-radio>
                        <a-radio :value="3">左图右文</a-radio>
                      </a-radio-group>
                    </a-col>
                  </a-row>
                  <div class="btn">
                    <a-button type="primary" @click="setStatus">保存</a-button>
                  </div>
                </div>
              </a-tab-pane>
            </a-tabs>
            <f-footer></f-footer>
          </a-layout-content>
        </a-row>
      </a-layout>
    </a-layout>
  </div>
</template>
<script>
import settingsider from "../../components/layout/SettingSider.vue";
import sider from "../../components/layout/Sider.vue";
import header from "../../components/layout/Header.vue";
import footer from "../../components/layout/Footer.vue";
export default {
  metaInfo: {
    title: "站点设置",
  },
  data() {
    return {
      iconLoading: false,
      settingdata: [],
      status: 0,
    };
  },
  components: {
    "f-header": header,
    "f-sider": sider,
    "f-footer": footer,
    "f-settingsider": settingsider,
  },
  mounted() {
    this.$parent.tokenverify();
    this.getSetting();
    this.getStatus();
    this.setsiders();
  },
  methods: {
    callback(key) {
      console.log(key);
    },
    //获取站点信息
    getSetting() {
      const url = "/Admin/Setting/getSettingInfo";
      const paramObj = {
        token: localStorage.getItem("token"),
      };
      this.$server.sl("GET", url, paramObj).then((res) => {
        if (res.code == 1) {
          var settingdata = JSON.stringify(res.data);
          localStorage.setItem("settingdata", settingdata);
          this.settingdata = res.data;
        } else if (res.code == 4001) {
          this.$router.push("/Auth/login");
          this.$message.warning("凭证失效，请重新登陆");
        } else {
          this.$message.warning("获取失败，请刷新重试");
        }
      });
    },
    //保存
    save() {
      this.iconLoading = true;
      const url = "/Admin/Setting/saveSettingInfo";
      const paramObj = {
        settingdata: this.settingdata,
        token: localStorage.getItem("token"),
      };
      this.$server.sl("POST", url, paramObj).then((res) => {
        if (res.code == 1) {
          this.iconLoading = false;
          this.$message.success("修改成功");
        } else if (res.code == 4001) {
          this.$router.push("/Auth/login");
          this.$message.warning("凭证失效，请重新登陆");
        } else {
          this.$message.warning("保存失败，请修改后重试");
        }
      });
    },
    onChange(e) {
      this.status = e.target.value;
      console.log("radio checked", e.target.value);
    },
    //获取分类状态
    getStatus() {
      const url = "/Admin/Setting/getHomeCateStatus";
      const paramObj = {
        token: localStorage.getItem("token"),
      };
      this.$server.sl("GET", url, paramObj).then((res) => {
        if (res.code == 1) {
          this.status = res.data.status;
          console.log(this.data);
        } else if (res.code == 4001) {
          this.$router.push("/Auth/login");
          this.$message.warning("凭证失效，请重新登陆");
        } else {
          this.$message.warning("获取分类失败，请刷新重试");
        }
      });
    },
    //设置分类状态
    setStatus() {
      const url = "/Admin/Setting/setHomeCateStatus";
      const paramObj = {
        status: this.status,
        token: localStorage.getItem("token"),
      };
      this.$server.sl("POST", url, paramObj).then((res) => {
        if (res.code == 1) {
          this.$message.success("设置成功");
        } else if (res.code == 4001) {
          this.$router.push("/Auth/login");
          this.$message.warning("设置失效，请重新登陆");
        } else {
          this.$message.warning("设置失败，请刷新重试");
        }
      });
    },
    //菜单选中设置
    setsiders() {
      this.$store.commit("updateselectedKeys", "10");
      this.$store.commit("updateSubmenu", "10-1");
    },
    //返回上一页
    back() {
      this.$router.go(-1);
    },
  },
};
</script>
<style scoped>
.mt1r {
  margin-top: 1rem;
}
.ml1rem {
  margin-left: 1rem;
}
.btn {
  margin-top: 10px;
}
.title {
  margin: 0 0 10px;
  font-size: 20px;
}
/deep/.ant-tabs-bar {
  margin: 0;
}
</style>